<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="经期日历"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 经期概览 -->
    <div class="mx-4 mt-4">
      <div class="bg-white rounded-lg p-4 shadow-sm">
        <div class="flex justify-between items-center">
          <div>
            <p class="text-sm text-gray-600">下次预计</p>
            <p class="text-lg font-bold text-pink-500">{{ nextPeriodDate || '暂无数据' }}</p>
          </div>
          <van-button type="primary" size="small" @click="showAddCycle = true">
            记录经期
          </van-button>
        </div>
      </div>
    </div>

    <!-- 日历视图 -->
    <div class="mx-4 mt-4">
      <van-calendar
        :show="showCalendar"
        @confirm="onCalendarConfirm"
        @cancel="showCalendar = false"
        type="range"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </div>

    <!-- 经期记录列表 -->
    <div class="mx-4 mt-4">
      <h3 class="font-bold text-gray-800 mb-3">历史记录</h3>
      <div class="space-y-3">
        <div 
          v-for="cycle in menstrualCycles" 
          :key="cycle.id"
          class="bg-white rounded-lg p-4 shadow-sm"
        >
          <div class="flex justify-between items-start">
            <div>
              <p class="font-medium text-gray-800">
                {{ formatDate(cycle.startDate) }} - {{ formatDate(cycle.endDate) }}
              </p>
              <div class="mt-2 space-y-1">
                <p class="text-sm text-gray-600">周期: {{ cycle.cycleLength }}天</p>
                <p class="text-sm text-gray-600">经期: {{ cycle.periodLength }}天</p>
                <p v-if="cycle.symptoms" class="text-sm text-gray-600">症状: {{ cycle.symptoms }}</p>
              </div>
            </div>
            <van-icon name="edit" class="text-gray-400" @click="editCycle(cycle)" />
          </div>
        </div>
      </div>
    </div>

    <!-- 添加经期记录弹窗 -->
    <van-popup v-model:show="showAddCycle" position="bottom" round>
      <div class="p-4">
        <h3 class="font-bold text-lg mb-4">记录经期</h3>
        <van-form @submit="onSubmitCycle">
          <van-field
            v-model="newCycle.startDate"
            label="开始日期"
            placeholder="请选择开始日期"
            readonly
            @click="showStartDatePicker = true"
            :rules="[{ required: true, message: '请选择开始日期' }]"
          />
          <van-field
            v-model="newCycle.endDate"
            label="结束日期"
            placeholder="请选择结束日期"
            readonly
            @click="showEndDatePicker = true"
            :rules="[{ required: true, message: '请选择结束日期' }]"
          />
          <van-field
            v-model="newCycle.cycleLength"
            label="周期长度"
            placeholder="请输入周期长度(天)"
            type="number"
            :rules="[{ required: true, message: '请输入周期长度' }]"
          />
          <van-field
            v-model="newCycle.periodLength"
            label="经期长度"
            placeholder="请输入经期长度(天)"
            type="number"
            :rules="[{ required: true, message: '请输入经期长度' }]"
          />
          <van-field
            v-model="newCycle.symptoms"
            label="症状"
            type="textarea"
            rows="2"
            placeholder="记录经期症状"
          />
          <van-field
            v-model="newCycle.mood"
            label="心情"
            type="textarea"
            rows="2"
            placeholder="记录心情变化"
          />
          <div class="mt-4">
            <van-button type="primary" block native-type="submit">
              保存记录
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!--